<script>
import router from '@/router'

export default {
    data() {
        return {
            xs: '',
            lx: '',
            qz: '',
            sy: '',
        }
    },
    methods: {
        // 点击确认，跳转到请假列表页面
        skip() {
            router.push('/leave/leaveApp')
            var obj = {
                'class': this.lx,
                'leaveCause': this.sy,
                'leaveTime': this.qz,
                'stuId' : "123",
                'stuName': this.xs,
            }

            localStorage.setItem('key', JSON.stringify(obj))
            // let qqq = localStorage.getItem('key')
            // console.log(JSON.parse(qqq));
        }
    }
}

</script>
<template>
    <div class="box">
        <h3 class="header">请假申请</h3>

        <div class="content">
            <el-form-item class="title" label="请假学生 :">
                <el-input class="type" placeholder="请输入" v-model="xs" />
            </el-form-item>

            <el-form-item class="title" label="请假班级 :">
                <el-select class="type" placeholder="请选择" v-model="lx">
                    <el-option label="一年级一班" value="一年级一班" />
                    <el-option label="一年级二班" value="一年级二班" />
                </el-select>
            </el-form-item>

            <el-form-item class="title" label="起止时间 :">
                <el-input class="type" placeholder="请输入" v-model="qz" />
            </el-form-item>

            <el-form-item class="title" label="请假事由 :">
                <el-input class="w-50 m-2 type" size="large" placeholder="请输入" v-model="sy" />
            </el-form-item>
        </div>

        <div class="button">
            <el-button>取消</el-button>
            <el-button type="primary" @click="skip">确认</el-button>
        </div>
    </div>
</template>
<style scoped lang="scss">
.header {
    margin-bottom: 16px;
}

.title {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
}

.type {
    margin-left: 15px;
}

.box {
    width: 650px;
    height: 450px;
    background-color: #fff;
    margin: 50px auto;
    position: relative;
}

.content {
    margin: 50px 170px;
}

.button {
    position: absolute;
    top: 380px;
    right: 80px;
}
</style>